<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link  th:replace="header::head">
    <style>
        .btn-upload {
            position: relative;
            display: inline-block;
            height: 31px;
            *display: inline;
            overflow: hidden;
            vertical-align: middle;
            cursor: pointer
        }

        .input-file {
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            z-index: 1;
            font-size: 30em;
            opacity: 0;
            filter: alpha(opacity=0)
        }
    </style>
</head>
<body>
<div id="wrapper" >
    <!--        左侧菜单栏-->
    <div class="navbar-default navbar-static-side" role="navigation" th:replace="sidebar::left">
    </div>
    <div id="page-wrapper" class="gray-bg">
        <!--            头部导航栏-->
        <div class="row border-bottom" th:replace="header::nave"></div>

        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>网格选项 - 基于引导网格系统概述</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="/">主页</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>用户管理</a>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <!--            内容-->
        <div id="page-wrapperpper" class="gray-bg" >
            <!--中间内容部分-->
            <div id="app">
                <!--头部搜索栏部分-->
                <nav class="navbar navbar-light bg-light">
                    <div class="form-inline">
                        <button class="btn btn-primary" @click="addShow()">添加用户</button>
                        <label for="username">用户名：</label>
                        <input class="form-control mr-sm-2" id="username" type="text" v-model="searchNmae" placeholder="请输入用户名" aria-label="Search" name="username">
                        <label for="address">地址：</label>
                        <input class="form-control mr-sm-2" id="address" type="text" v-model="searchAddress" placeholder="请输入地址" aria-label="Search" name="address">
                        <button class="btn btn-outline-success my-2 my-sm-0" @click="searchUser()">搜索</button>
                    </div>
                </nav>
                <!--左边用户数据展示表格部分-->
                <div class="row" style="margin-top: 30px;">
                    <div id="usertable" class="col-md-12">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">用户名</th>
                                <th scope="col">地址</th>
                                <th scope="col">头像</th>
                                <th scope="col">简介</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr v-for="user,index in users" :key="user.id">
                                    <th scope="row">{{user.id}}</th>
                                    <td>{{user.username}}</td>
                                    <td>{{user.address}}</td>
                                    <td>
                                        <a href="#" v-bind:src="user.small_img" title="头像放大" onclick="fd(this)">
                                            <img style="width: 60px" v-bind:src="user.small_img" >
                                        </a>
                                    </td>
                                    <td>{{user.profile}}</td>
                                    <td>
                                        <button type="button" class="btn btn-primary" @click="getUserById(user.id);">修改</button>
                                        <button type="button" class="btn btn-danger" @click="deletById(user.id,user.username);">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-5" style="display: none" id="add">
                        <div>
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" name="username" aria-describedby="usernameHelp" v-model="user.username">
                            </div>
                            <div class="form-group">
                                <label >密码</label>
                                <input type="password" name="password" class="form-control" id="password" v-model="user.password">
                            </div>
                            <div class="form-group">
                                <label for="address">地址</label>
                                <input type="text" name="address" class="form-control" v-model="user.address">
                            </div>
                            <div class="form-group">
                                <label >简介</label>
                                <textarea  name="profile"  v-model="user.profile" class="form-control" rows="3"></textarea>
                            </div>
                            <div class="row cl">
                                <input type="text" hidden="hidden" id="addimg" v-model="user.small_img" name="small_img" >
                                    <label class="form-label col-xs-4 col-sm-3">头像:</label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <img id="head_picture" style="width:50px;height:50px;border-radius:50%" src=""/>
                                        <span class="btn-upload form-group formControls" style="margin-top: 10px;">
                                        <button style="margin-left:10px;" class="btn btn-primary radius">上头像</button>
                                            <form id="update_user_form" enctype="multipart/form-data">
                                                <input type="file" id="head_picture_file" name="profile" class="input-file">
                                            </form>
                                     </span>
                                    </div>
                            </div>
                            <button type="button" @click="saveUser()" class="btn btn-primary">提交</button>
                        </div>
                    </div>

                    <div class="col-md-12 col-md-offset-3" style="display: none" id="updateUser">
                        <div>
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" name="username" aria-describedby="usernameHelp" v-model="user.username">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" name="password" class="form-control"v-model="user.password">
                            </div>
                            <div class="form-group">
                                <label >地址</label>
                                <input type="text" name="address" class="form-control" v-model="user.address">
                            </div>
                            <div class="form-group">
                                <label >简介</label>
                                <textarea  name="profile" class="form-control" rows="3"  v-model="user.profile"></textarea>
                            </div>
                            <div class="row cl">
                                <input type="text" hidden="hidden" id="addimg1" v-model="user.small_img" name="small_img" >
                                <label class="form-label col-xs-4 col-sm-3">头像:</label>
                                <div class="formControls col-xs-8 col-sm-9">
                                    <img id="head_picture1" style="width:160px;height:160px;border-radius:50%" v-bind:src="user.small_img"/>
                                    <span class="btn-upload form-group formControls" style="margin-top: 10px;">
                                        <button style="margin-left:10px;" class="btn btn-primary radius">上头像</button>
                                            <form id="update_user_form1" enctype="multipart/form-data">
                                                <input type="file" id="head_picture_file1" name="profile" class="input-file">
                                            </form>
                                     </span>
                                </div>
                            </div>
                            <button type="button" @click="updateUser()" class="btn btn-primary">确认修改</button>
                        </div>
                    </div>
                    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
                    <div id="innerdiv" style="position:absolute;">
                        <img id="bigimg" style="border:5px solid #fff;" src="" />
                    </div>
                </div>
            </div>
        <!--            底部-->
        <div class="footer" th:replace="footer::footer"></div>
    </div>
    </div>
</div>
<!-- blueimp gallery -->
<script src="/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

<!--vue部分-->
<script>
    var imgurl;
    $(document).ready(function () {
        //上传头像预览上传的头像
        $("#head_picture_file").change(function (e) {
            var reader = new FileReader();
            file = e.target.files[0];
            if (!/image\/\w+/.test(file.type)) {//判断文件的是不是图片
                alert("上传的文件格式不对,请重新上传...");
                return false;
            }
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $("#head_picture").attr("src", "" + this.result + "");
                var formData = new FormData($("#update_user_form")[0]); //封装表单数据
                $.ajax({
                    url: '/profiles',
                    type: 'PUT',
                    data: formData,
                    cache: false,
                    contentType: false, //必需,因为我们在表单上填加了`enctype="multipart/form-data"`,所以这里设为false
                    processData: false,//必需,默认为true,发送的数据转为Object,适合于"application/x-www-form-urlencoded",这里设为false
                    xhrFields: {
                        withCredentials: true //跨域请求必须
                    },
                    success: function (result) {
                        $("#addimg").val(result);
                        imgurl=result;
                        console.log(result);
                    }
                });
            };
        });

        //修改时修改头像预览上传的头像
        $("#head_picture_file1").change(function (e) {
            var reader = new FileReader();
            file = e.target.files[0];
            if (!/image\/\w+/.test(file.type)) {//判断文件的是不是图片
                alert("上传的文件格式不对,请重新上传...");
                return false;
            }
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $("#head_picture1").attr("src", "" + this.result + "");
                var formData = new FormData($("#update_user_form1")[0]); //封装表单数据
                $.ajax({
                    url: '/profiles',
                    type: 'PUT',
                    data: formData,
                    cache: false,
                    contentType: false, //必需,因为我们在表单上填加了`enctype="multipart/form-data"`,所以这里设为false
                    processData: false,//必需,默认为true,发送的数据转为Object,适合于"application/x-www-form-urlencoded",这里设为false
                    xhrFields: {
                        withCredentials: true //跨域请求必须
                    },
                    success: function (result) {
                        $("#addimg").val(result);
                        imgurl=result;
                        console.log(result);
                    }
                });
            };
        });
    })

    const app=new Vue({
        el:"#app",
        data:{
            //数据应该来源于后端
            users:[],
            //用于单条数据双向绑定
            user:{},
            searchNmae:"",
            searchAddress:"",
        },
        methods:{
            //查询所有用户
            findAll(){
                //声明一个vue对象
                let  _this=this;
                axios.get('/user/list')
                    .then(function (response) {
                        // handle success
                        _this.users=response.data;
                    })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
            },
            saveUser(){
                let  _this=this;
                _this.user.small_img=imgurl
                axios.post('/user/addUser',_this.user)
                .then(function (response) {
                    if(response.data.success){
                        // 更新页面
                        _this.findAll();
                        //清空用户数据
                        _this.user={};
                        layer.msg('添加成功！', {icon: 1});
                        $("#usertable").attr("class","col-md-12");
                        document.getElementById("add").style.display="none"
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    layer.msg('添加失败！', {icon: 2});
                });
            },
            getUserById(id){//通过id查询
                let  _this=this;
                axios.get('/user/seUserById', {
                    params: {
                        id: id
                    }
                })
                .then(function (response) {
                    _this.user=response.data;
                    layer.open({
                        type: 1,
                        title:'修改用户数据',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['30%', '80%'], //宽高
                        content:$("#updateUser")
                    });
                })
                .catch(function (error) {
                    console.log(error);
                })
            },
            updateUser(){//确认修改
                let  _this=this;
                _this.user.small_img=imgurl
                axios.post('/user/updateUser',_this.user)
                .then(function (response) {
                    if(response.data.success){
                        layer.closeAll();
                        // 更新页面
                        _this.findAll();
                        //清空用户数据
                        _this.user={};
                        layer.msg('修改成功！', {icon: 1});
                    }else {

                    }
                })
                .catch(function (error) {
                    console.log(error);
                    layer.msg('修改失败！', {icon: 2});
                });
            },
            deletById(id,username){//通过id删除
                let  _this=this;
                //信息框-例2

                layer.alert('你确定删除id为'+id+'，用户名为'+username+'么？', {
                    time: 0 //不自动关闭
                    ,icon: 7
                    ,skin: 'layui-layer-molv'
                    ,btn: ['确认删除', '取消']
                    ,yes: function(index){
                        axios.get('/user/deleteById', {
                            params: {
                                id: id
                            }
                        })
                            .then(function (response) {
                                if(response.data.success){
                                    layer.closeAll();
                                    // 更新页面
                                    _this.findAll();
                                    //清空用户数据
                                    _this.user={};
                                    layer.msg('删除成功！', {icon: 1});
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                                layer.msg('删除失败！', {icon: 2});
                            })
                    }
                });
            },
            addShow(){
                // id="usertable"
                $("#usertable").attr("class","col-md-7");
                // $("#add").attr("display","block");
                document.getElementById("add").style.display="block"
            },
            searchUser(){//模糊查询
                let  _this=this;
                axios.get('/user/list',{
                    params: {
                        username: _this.searchNmae,
                        address:_this.searchAddress
                    }
                })
                    .then(function (response) {
                        // handle success
                        _this.users=response.data;
                    })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
            }
        },
        // 生命周期
        created(){
            this.findAll();
        }
    });

    //查看头像
    function fd(thi){
        // $(this);//将当前的pimg元素作为_this传入函数
        //页面层-图片
        layer.open({
            type: 2,
            title: false,
            closeBtn: 0,
            area: ['40%','50%'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: $(thi).attr("src")
        });
    }
</script>
</body>
</html>